<template>
  <q-page>
    <div class="text-weight-bold row items-end q-ma-xs q-gutter-sm">
      <q-card bordered>
        <q-card-section>
          <div>批量 识别\拼合 组件名中的柜子信息👇</div>
          <q-btn color="primary" label="解读组件名" @click="解读组件名()" />
          <div class="row items-end">
            <q-input
              v-model="成品柜名"
              label="成品柜名"
              size="10"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />

            <q-input
              v-model="单元柜名"
              label="单元柜名"
              size="10"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
            <q-input
              label="板名"
              v-model="板名"
              size="10"
              label-color="orange"
              readonly
              outlined
              stack-label
            />
            <q-input
              v-model="订单"
              label="订单"
              size="10"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
            <q-input
              v-model="客户"
              label="客户"
              size="10"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
          </div>
          <q-btn color="primary" label="拼合组件名" @click="拼合组件名()" />
        </q-card-section>
        <q-separator dark inset />
      </q-card>

      <q-card bordered>
        <q-card-section>
          <q-checkbox v-model="启用" label="启用四面封边" />
          <div class="row items-end">
            <q-input
              v-model="小于多少毫米不封边"
              label="小于多少毫米不封边?"
              size="14"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
            <q-input
              v-model="封边厚度"
              label="封边厚度?"
              size="6"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
            <q-input
              v-model="每块板数量"
              label="每块板数量?"
              size="8"
              label-color="orange"
              outlined
              clearable
              stack-label
              @keyup.enter="kkyy"
            />
          </div>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <q-btn color="primary" label="导出cad" @click="导出cad()" />
          <p>群组名称中 含以下关键词会被排除：参考|布局盒子</p>
          <q-input
            class="textarea_id"
            id="textarea_id"
            v-model="store.调用amtf_dxf2结果显示"
            filled
            ref="textareakk"
            type="textarea"
            @update:model-value="kkyy2"
          />
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<!-- <script>
defineComponent({
  name: '动态组件'
})
</script> -->

<script setup>
import { defineComponent, computed } from "vue";
import { ref, toRefs, reactive, watch, nextTick } from "vue";
import { copyToClipboard } from "quasar";
import { useQuasar } from "quasar";

import useClient from "../hooks/useClient";
const { store, storeToRefs } = useClient(ws);
const { 生产 } = storeToRefs(store);
// console.log(生产);
// console.log(生产.value);
const {
  成品柜名,
  单元柜名,
  板名,
  订单,
  客户,
  启用,
  小于多少毫米不封边,
  封边厚度,
  每块板数量,
} = toRefs(生产.value);

const textareakk = ref(null);
// console.log('******',x)

const $q = useQuasar();

function 导出cad() {
  if (store.su连接状态 == 0) {
    // alert("请开启 amtf_dxf 服务程序先！");
    showNotif("请开启su插件 amtf_su 先！", "center");
    return;
  }
  let arg = `${启用.value}_${小于多少毫米不封边.value}_${封边厚度.value}__板数${每块板数量.value}`;
  // ws.send(JSON.stringify({ sketchup: "导出cad", 生产: value }));
  ws.send(JSON.stringify({ sketchup: "导出cad", 生产: arg }));
  // store.调用amtf_dxf2结果.push("kk.调用amtf_dxf2结果");
}
function 解读组件名() {
  if (store.su连接状态 == 0) {
    showNotif("请开启su插件 amtf_su 先！", "center");
    return;
  }
  ws.send(JSON.stringify({ sketchup: "解读组件名" }));
}
function 拼合组件名() {
  if (store.su连接状态 == 0) {
    showNotif("请开启su插件 amtf_su 先！", "center");
    return;
  }
  let 组件名ar = [];
  组件名ar.push(成品柜名.value);
  组件名ar.push(单元柜名.value);
  组件名ar.push(板名.value);
  组件名ar.push(订单.value);
  组件名ar.push(客户.value);
  let 组件名 = 组件名ar.join("_");
  ws.send(JSON.stringify({ sketchup: "拼合组件名", 组件名: 组件名 }));
}
function showNotif(message, position) {
  $q.notify({
    message,
    color: "negative",
    timeout: 1500,
    position,
  });
}

function 复制内容(params) {
  copyToClipboard(params)
    .then(() => {
      showNotif(`${params} 已复制`, "center");
    })
    .catch(() => {
      // 失败
    });
}

function kkyy(e) {
  // @keyup.enter="$event.target.blur"
  // console.log(e.target);
  e.target.blur();
}
function kkyy2(e) {
  // @keyup.enter="$event.target.blur"
  alert(e);
  console.log(e.target);
  // e.target.blur();
}

// watch(store.调用amtf_dxf2结果显示, (newValue, oldValue) => {
//   alert("新值是" + newValue, "旧址是" + oldValue);
// });

watch(store.调用amtf_dxf2结果, (newValue, oldValue) => {
  // 每当它发生变化时，将整个状态持久化到本地存储
  // localStorage.setItem('piniaState', JSON.stringify(state))
  // console.log("新值是" + newValue);
  // console.log("旧值是" + oldValue);
  console.log(textareakk.value.nativeEl.scrollHeight);
  // textareakk.value.focus();
  // const textarea = document.getElementById('scroll_text');
  // textareakk.value.scrollTop = textareakk.value.scrollHeight;
  const textarea = textareakk.value.nativeEl;
  // textarea.scrollTop = textarea.scrollHeight;
  nextTick(() => {
    textarea.scrollTop = textarea.scrollHeight;
  });
});
</script>

<style lang="scss">
.subformula-error {
  color: $negative !important;
}
</style>
